<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xbox主机控制台</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            min-height: 100vh;
            color: #333;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        h1 {
            margin: 0;
            color: #0078d7;
            font-weight: 600;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .view-toggle {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-primary {
            background: linear-gradient(to right, #0078d7, #005a9e);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(to right, #6c757d, #495057);
            color: white;
        }
        
        .btn-stream {
            background: linear-gradient(to right, #107c10, #085c08);
            color: white;
            padding: 10px 20px;
            font-size: 14px;
        }
        
        .view-toggle .btn {
            background: rgba(233, 236, 239, 0.8);
            color: #495057;
        }
        
        .view-toggle .btn.active {
            background: linear-gradient(to right, #0078d7, #005a9e);
            color: white;
        }
        
        .console-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .console-item {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            transition: all 0.3s ease;
        }
        
        .console-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }
        
        .console-item.list-view {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .console-info {
            flex-grow: 1;
        }
        
        .console-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #0078d7;
        }
        
        .console-details {
            font-size: 15px;
            color: #555;
            margin-bottom: 15px;
        }
        
        .console-type {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            background: linear-gradient(to right, #e9ecef, #dee2e6);
            color: #495057;
        }
        
        .power-state {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            margin-left: 10px;
        }
        
        .power-on {
            background: linear-gradient(to right, #107c10, #085c08);
            color: white;
        }
        
        .power-standby {
            background: linear-gradient(to right, #ffc107, #e0a800);
            color: #000;
        }
        
        .loading {
            text-align: center;
            padding: 60px;
            font-size: 26px;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
        
        .hidden {
            display: none;
        }
        
        .list-view .console-item {
            display: flex;
            flex-direction: row;
        }
        
        .grid-view .console-item {
            display: block;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 15px;
            }
            
            .console-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Xbox主机控制台</h1>
            <div>
                <button id="refreshBtn" class="btn btn-primary">刷新主机列表</button>
                <div class="view-toggle">
                    <button id="listViewBtn" class="btn active">列表视图</button>
                    <button id="gridViewBtn" class="btn">图标视图</button>
                </div>
            </div>
        </div>
        
        <div id="loading" class="loading hidden">
            加载中...
        </div>
        
        <div id="consoleContainer" class="console-list grid-view">
            <!-- 主机列表将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // DOM元素
        const refreshBtn = document.getElementById('refreshBtn');
        const listViewBtn = document.getElementById('listViewBtn');
        const gridViewBtn = document.getElementById('gridViewBtn');
        const consoleContainer = document.getElementById('consoleContainer');
        const loadingElement = document.getElementById('loading');
        
        // 当前视图模式
        let currentView = 'grid'; // 'list' 或 'grid'
        
        // API基础URL
        const apiUrl = '/api/console';
        
        // 获取主机列表
        async function getConsoleList() {
            try {
                // 显示加载状态
                consoleContainer.classList.add('hidden');
                loadingElement.classList.remove('hidden');
                
                const response = await fetch(apiUrl, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    displayConsoleList(data.consoles || []);
                } else {
                    console.error('获取主机列表失败:', response.status);
                    consoleContainer.innerHTML = '<div class="loading">获取主机列表失败</div>';
                    consoleContainer.classList.remove('hidden');
                    loadingElement.classList.add('hidden');
                }
            } catch (error) {
                console.error('获取主机列表时发生错误:', error);
                consoleContainer.innerHTML = '<div class="loading">获取主机列表时发生错误</div>';
                consoleContainer.classList.remove('hidden');
                loadingElement.classList.add('hidden');
            }
        }
        
        // 选择主机
        async function selectConsole(consoleData) {
            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(consoleData)
                });
                
                if (response.ok) {
                    // 选择成功后返回主页
                    window.location.href = '/';
                } else {
                    console.error('选择主机失败:', response.status);
                    alert('选择主机失败');
                }
            } catch (error) {
                console.error('选择主机时发生错误:', error);
                alert('选择主机时发生错误');
            }
        }
        
        // 刷新主机列表
        refreshBtn.addEventListener('click', function() {
            getConsoleList();
        });
        
        // 切换到列表视图
        listViewBtn.addEventListener('click', function() {
            currentView = 'list';
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
            consoleContainer.classList.remove('grid-view');
            consoleContainer.classList.add('list-view');
            updateConsoleItemsView();
        });
        
        // 切换到图标视图
        gridViewBtn.addEventListener('click', function() {
            currentView = 'grid';
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
            consoleContainer.classList.remove('list-view');
            consoleContainer.classList.add('grid-view');
            updateConsoleItemsView();
        });
        
        // 更新主机项的视图样式
        function updateConsoleItemsView() {
            const items = document.querySelectorAll('.console-item');
            items.forEach(item => {
                item.classList.remove('list-view', 'grid-view');
                item.classList.add(currentView + '-view');
            });
        }
        
        // 显示主机列表
        function displayConsoleList(consoles) {
            // 隐藏加载状态
            loadingElement.classList.add('hidden');
            consoleContainer.classList.remove('hidden');
            
            // 清空现有内容
            consoleContainer.innerHTML = '';
            
            // 检查是否有主机数据
            if (!consoles || consoles.length === 0) {
                consoleContainer.innerHTML = '<div class="loading">未找到主机</div>';
                return;
            }
            
            // 为每个主机创建元素
            consoles.forEach(console => {
                const consoleItem = document.createElement('div');
                consoleItem.className = `console-item ${currentView}-view`;
                
                // 根据电源状态设置CSS类
                const powerStateClass = console.powerState === 'on' ? 'power-on' : 'power-standby';
                const powerStateText = console.powerState === 'on' ? '开机' : '待机';
                
                consoleItem.innerHTML = `
                    <div class="console-info">
                        <div class="console-name">${console.name}</div>
                        <div class="console-details">
                            ID: ${console.id}<br>
                            语言: ${console.locale}
                        </div>
                        <div>
                            <span class="console-type">${console.consoleType}</span>
                            <span class="power-state ${powerStateClass}">${powerStateText}</span>
                        </div>
                    </div>
                    <button class="btn btn-stream" data-console='${JSON.stringify(console)}'>选择主机</button>
                `;
                
                consoleContainer.appendChild(consoleItem);
            });
            
            // 为所有选择主机按钮添加事件监听器
            document.querySelectorAll('.btn-stream').forEach(button => {
                button.addEventListener('click', function() {
                    const consoleData = JSON.parse(this.getAttribute('data-console'));
                    selectConsole(consoleData);
                });
            });
        }
        
        // 页面加载完成后自动获取主机列表
        window.addEventListener('load', function() {
            getConsoleList();
        });
    </script>
</body>
</html>